<!--  -->
<template>
  <div>
    <el-steps :active="spuStep" finish-status="success" simple>
      <el-step title="录入spu基本信息" icon="el-icon-info"></el-step>
      <el-step title="录入spu属性信息" icon="el-icon-edit"></el-step>
      <el-step title="录入sku相关信息" icon="el-icon-share"></el-step>
    </el-steps>
    <div v-if="spuStep==0" style="width:450px;margin-left:15%;padding:20px">
      <!-- -->
      <el-form ref="spuInfoform" :model="spuInfo" label-width="80px" :rules="spuInfoRules">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="spuInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="选择分类" prop="categoryId">
          <!-- <el-cascader :props="props" size="medium" clearable v-model=""></el-cascader> -->
          <category-cascade @selectedValue="selectedValue"></category-cascade>
        </el-form-item>
        <el-form-item label="品牌" prop="brandId">
          <brand-select @selectedVal="brandSelectedVal"></brand-select>
        </el-form-item>
        <el-form-item label="上架" prop="publishStatus">
          <el-switch
            v-model="spuInfo.publishStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="详情海报" prop="images">
          <br />
          <!-- <el-input v-model="spuInfo.images"></el-input> -->
          <multi-upload :value="spuInfo.images" @input="emitInput"></multi-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-top: 12px;" @click="next">{{btnText}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="spuStep==1" style="margin-left:15%;padding:20px">
      <el-form ref="spuInfoform" :model="spuInfo" label-width="100px">
        <!-- 当前分类下所有属性分组遍历 -->
        <el-form-item
          :label="group.name"
          v-for="(group,i)  in groups"
          :key="i"
        >
          <!-- 获取每个分组的所有属性，遍历的是外面的，选中的是form里面绑定值得 -->
          <!-- 属性有很多值 -->

          <el-form-item
            v-for="(attr,index) in group.attrEntities"
            :key="index"
            :label="attr.name"
          >
            <el-checkbox-group
              size="small"
              v-model="finalValues[i][index].valueSelected"
              @change="handleCheckedAttrChange"
              style="text-align: left"
            >
              <el-checkbox
                border
                v-for="(attrItem,num) in attr.valueSelect"
                :key="index+'-'+num+''+i"
                :label="attrItem"
              >{{attrItem}}</el-checkbox>
              <!-- -->
            </el-checkbox-group>
<!--
            <el-radio-group
              v-model="finalValues[i][index].valueSelected"
              v-if="attr.valueType == 0"
            >
              <el-radio
                v-for="(attrItem,num) in attr.valueSelect"
                :key="index+'-'+num+''+i"
                :label="attrItem"
              >{{attrItem}}</el-radio>
            </el-radio-group> -->
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" style="margin-top: 12px;" @click="prev">上一步</el-button>
          <el-button type="primary" size="mini" style="margin-top: 12px;" @click="next">{{btnText}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="spuStep==2" style="margin-left:15%;padding:20px;">
      <!-- 1:颜色  ： 21黑，22白，23粉
      2：内存：   81:8g,82:10g,88:21g-->
      <!-- [{attrId:1,value:[白,黑]}，,{attrId:2,value:[8,10]}] -->
      <el-form ref="saleGroupForm" label-width="100px" :v-model="saleGroupForm">
        <el-form-item v-for="(sale,index) in saleGroups" :key="index" :label="sale.name">
          <el-checkbox-group v-model="saleGroupValue[index].valueSelect" :key="index">
            <el-checkbox
              v-for="(saleItem,i) in sale.valueSelect"
              :label="saleItem"
              :key="i"
            >{{saleItem}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <!--[{25:18,30:5g,},{}]  -->
      <el-table :data="tableFinalData">
        <el-table-column
          v-for="(sale,index) in saleDataTable"
          :key="index"
          :label="sale.name"
          :prop="'attr_'+sale.id"
        ></el-table-column>
        <el-table-column label="价格" v-if="saleDataTable.length>0" prop="price">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price" placeholder="价格"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="设置详情" v-if="saleDataTable.length>0" type="expand">
          <template slot-scope="scope">
            <!-- 设置基本信息 -->
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span>sku基本信息</span>
              </div>
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item>
                  <el-input v-model="scope.row.name">
                    <template slot="prepend">名字</template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="scope.row.title">
                    <template slot="prepend">标题</template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="scope.row.subtitle">
                    <template slot="prepend">副标题</template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="scope.row.weight">
                    <template slot="prepend">重量</template>
                  </el-input>
                </el-form-item>
              </el-form>
            </el-card>
            <!-- 设置积分 -->
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span>设置积分</span>
              </div>
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item>
                  <el-input v-model="scope.row.growBounds" placeholder="成长积分">
                    <template slot="prepend">赠送</template>
                    <template slot="append">成长积分</template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="scope.row.buyBounds" placeholder="购物积分">
                    <template slot="prepend">赠送</template>
                    <template slot="append">购物积分</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="生效情况">
                  <br />
                  <el-form-item label="无优惠，成长积分是否生效">
                    <el-switch v-model="scope.row.work[0]" :active-value="1" :inactive-value="0"></el-switch>
                  </el-form-item>
                  <el-form-item label="无优惠，购物积分是否生效">
                    <el-switch v-model="scope.row.work[1]" :active-value="1" :inactive-value="0"></el-switch>
                  </el-form-item>
                  <el-form-item label="有优惠，成长积分是否生效">
                    <el-switch v-model="scope.row.work[2]" :active-value="1" :inactive-value="0"></el-switch>
                  </el-form-item>
                  <el-form-item label="有优惠，购物积分是否生效">
                    <el-switch v-model="scope.row.work[3]" :active-value="1" :inactive-value="0"></el-switch>
                  </el-form-item>
                </el-form-item>
              </el-form>
            </el-card>

            <!-- 设置打折 -->
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span>设置打折</span>
              </div>
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item>
                  <el-input v-model="scope.row.fullCount">
                    <template slot="prepend">满</template>
                    <template slot="append">件</template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="scope.row.discount">
                    <template slot="prepend">打</template>
                    <template slot="append">% 折</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="可否与其他优惠叠加">
                  <el-switch
                    v-model="scope.row.ladderAddOther"
                    :active-value="1"
                    :inactive-value="0"
                  ></el-switch>
                </el-form-item>
              </el-form>
            </el-card>

            <!-- 设置满减 -->
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span>设置满减</span>
              </div>
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item>
                  <el-input v-model="scope.row.fullPrice" placeholder>
                    <template slot="prepend">满</template>
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="scope.row.reducePrice">
                    <template slot="prepend">减</template>
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="可否与其他优惠叠加">
                  <el-switch v-model="scope.row.fullAddOther" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
              </el-form>
            </el-card>

            <!-- 上传图片 -->
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span>上传图片</span>
                <!-- vue，想要回调的时候额外用到自己的数据，和人家原生默认的，只需要 $event就能引用到 -->
                <multi-upload :value="scope.row.images" @input="skuUploadImage(scope.row,$event)"></multi-upload>
              </div>
            </el-card>
          </template>
        </el-table-column>
      </el-table>

      <el-button type="primary" size="mini" style="margin-top: 12px;" @click="prev">上一步</el-button>
      <el-button type="primary" size="mini" style="margin-top: 12px;" @click="next">{{btnText}}</el-button>
    </div>
    <!--<div v-if="spuStep==3" style="width:450px;margin-left:30%;padding:20px">
      在这里写第四屏的信息
      <el-button type="primary" size="mini" style="margin-top: 12px;" @click="prev">上一步</el-button>
      <el-button type="primary" size="mini" style="margin-top: 12px;" @click="next">{{btnText}}</el-button>
    </div>-->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import CategoryCascade from "../../common/category-cascade";
import BrandSelect from "../../common/brand-select";
import MultiUpload from "@/components/upload/multiUpload";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { CategoryCascade, BrandSelect, MultiUpload },
  data() {
    let slef = this;
    //这里存放数据
    return {
      spuStep: 0,
      btnText: "下一步",
      finalValues: [[]],
      saleGroups: [],
      saleGroupValue: [],
      spuInfo: {
        name: "",
        categoryId: 0,
        brandId: 0,
        publishStatus: 0,
        images: [],
        groups: [],
        saleAttrs: []
      },
      saleGroupForm: {},
      groups: [],
      saleDataTable: [],
      tableFinalData: [],
      spuInfoRules: {
        name: [
          { required: true, message: "请添加商品名字", trigger: "blur" }
        ],
        categoryId: [
          { required: true, message: "请选择商品分类", trigger: "change" }
        ],
        brandId: [
          { required: true, message: "请选择商品品牌", trigger: "change" }
        ],
        images: [
          {
            type: "array",
            required: true,
            message: "请至少上传一张图片",
            trigger: "change"
          }
        ]
      },
      categorys: []
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    saleGroupValue: {
      handler(newValue, oldValue) {
        console.log("new==>" + newValue + "====>" + oldValue);
        this.setTableData(newValue);
      },
      deep: true
    },
    'spuInfo.categoryId': {
      handler(newValue, oldValue) {
        console.log('触发了监听方法：' + newValue)
        this.getGroups(newValue);
        console.log('groups：' + newValue)
      },
      deep: true
    }
  },
  //方法集合
  methods: {
    //计算笛卡尔积
    calcDescartes(array) {
      if (array.length < 2) return array[0] || [];
      return [].reduce.call(array, function(col, set) {
        var res = [];
        col.forEach(function(c) {
          set.forEach(function(s) {
            var t = [].concat(Array.isArray(c) ? c : [c]);
            t.push(s);
            res.push(t);
          });
        });
        return res;
      });
    },
    // 选中结果排列组合 生成的最终table值saleDataTable
    setTableData(saleList) {
      this.saleDataTable = [];
      this.tableFinalData = [];
      for (var i = 0; i < saleList.length; i++) {
        if (saleList[i].valueSelect.length > 0) {
          this.saleDataTable.push(saleList[i]);
        }
      }
      console.log(this.saleDataTable, "~~~~~~~~~~~");
      var decar = [];
      var attrId = [];
      var attrName = [];
      for (var i = 0; i < this.saleDataTable.length; i++) {
        decar.push(this.saleDataTable[i].valueSelect);
        attrId.push(this.saleDataTable[i].id)
        attrName.push(this.saleDataTable[i].name)
      }
      //遍历进行交叉想成
      var decarResult = this.calcDescartes(decar);
      console.log(decar, attrId, "计算后的", this.calcDescartes(decar));
      //封装计算后的笛卡尔积和其他结果
      /**
       * [
       * 0: (3) ["6g", "黑色", "256"]
       * 1: (3) ["6g", "黑色", "128g"]
       * 2: (3) ["6g", "黑色", "64g"]
       * 3: (3) ["6g", "白色", "256"]
       * ]
       */
      for (var i = 0; i < decarResult.length; i++) {
        var tableItem = {};
        for (var j = 0; j < decarResult[i].length; j++) {
          tableItem["attr_" + attrId[j]] = decarResult[i][j];
          tableItem["name_" + attrId[j]] = attrName[j];
          tableItem.price = 0;
          tableItem.stock = 0;
          tableItem.growBounds = tableItem.price;
          tableItem.buyBounds = tableItem.price;
          tableItem.work = [0, 0, 0, 0];
          tableItem.fullCount = 1;
          tableItem.discount = 0;
          tableItem.fullPrice = 0;
          tableItem.reducePrice = 0;
          tableItem.fullAddOther = 0;
          tableItem.images = [];

          //name
          tableItem.name = this.spuInfo.name + " " + decarResult[i];
          tableItem.title = this.spuInfo.name + " " + decarResult[i];
          tableItem.subTitle = this.spuInfo.name + " " + decarResult[i];
          tableItem.weight = 0;
        }
        this.tableFinalData.push(tableItem);
      }
      console.log("准备好的数据...", this.tableFinalData);
    },
    getGroups(cid) {
      console.log("三级分类，", this.spuInfo.categoryId)
      let self = this
      this.$http({
        url: this.$http.adornApiUrl(
          `/pms/attrgroup/withattrs/${cid}`
        ),
        method: "get"
      }).then(({ data }) => {
        console.log(this.spuInfo, this.groups)
        if (data && data.code === 0) {
          // [0][1] [0][2] [1][0] [1][2]
          //外面的每个valueSelect需要处理成数组方便遍历
          self.groups = data.data;
          self.finalValues = []; // [[1],[2],[3]]
          for (var i = 0; i < self.groups.length; i++) {
            console.log(
              "this.groups==>150",
              self.groups[i].attrEntities
            )
            self.finalValues.push([])
            if (self.groups[i].attrEntities) {
              for (var j = 0; j < self.groups[i].attrEntities.length; j++) {
                let valueSelect = self.groups[i].attrEntities[j].valueSelect
                self.groups[i].attrEntities[j].valueSelect = valueSelect ?  valueSelect.split(",") : ''
                self.finalValues[i].push({
                  attrId: this.groups[i].attrEntities[j].id,
                  attrName: this.groups[i].attrEntities[j].name,
                  valueSelected: []
                });
                // this.finalValues[i][j] = {};
                //{attrId:this.groups[i].attrEntities[j].attrId,valueSelected:[]}
              }
            }
          }
          // 保存每一组选中的值
          console.log(self.groups, "159~~~~~~~~~~~~~~~~~~~~~~~~");
          //赋值表单的，防止为null
          self.spuInfo.groups = data.data;
          console.log("this.spuInfo.groups", self.spuInfo.groups);
        } else {
        }
      });
    },
    getSaleGroups(categoryId) {
      let _self = this
      this.$http({
        url: this.$http.adornApiUrl(`/pms/attr/category/${categoryId}?type=0`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          _self.saleGroups = data.data;
          console.log(_self.saleGroups, "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
          for (var i = 0; i < _self.saleGroups.length; i++) {
            _self.saleGroupValue.push({
              id: _self.saleGroups[i].id,
              name: _self.saleGroups[i].name,
              valueSelect: []
            });
            if (_self.saleGroups[i].valueSelect) {
              _self.saleGroups[i].valueSelect = _self.saleGroups[
                i
              ].valueSelect.split(",");
            }
          }
        } else {
        }
      });
    },
    emitInput(list) {
      console.log("上传的文件", list);
      this.spuInfo.images = list;
    },
    skuUploadImage(row, list) {
      row.images = list;
    },
    next() {
      if (this.spuStep == 0) {
        //第一步，验证表单
        this.$refs.spuInfoform.validate(valid => {
          // var flag = valid;
          if (!valid) {
            return false;
          }
        });
      }

      if (this.spuStep == 1) {
        this.btnText = "确认保存";
        //第二步，需要按照第一步选择的分类id，查询当前分类下的属性和属性组，如果没有则维护属性组
        if (this.spuInfo.categoryId) {
          //获取三级分类中的所有属性组
          this.getSaleGroups(this.spuInfo.categoryId)
        }
        //验证表单数据
      }

      if (this.spuStep == 2) {
        var data = this.getPostData();
        if (data == null) {
          this.$alert("数据不完整，请正确录入相关信息", "警告");
        }
        const loading = this.$loading({
          lock: true,
          text: "数据量较大，正在拼命保存中...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });

        this.$http({
          url: this.$http.adornApiUrl("/pms/spu"),
          method: "post",
          data: this.$http.adornData(data, false)
        })
          .then(({ data }) => {
            this.$message("保存成功，" + data.msg);
            loading.close();
            //路由跳转到指定位置
            this.$router.push({
              path: `/pms-spu/list`, // 只是把query改了，其他都没变
              query: {
                catId: this.catId
              }
            });
          })
          .catch(err => {
            this.$message("网络故障，出现错误。" + err);
            loading.close();
          });

        //
        return true;
      }

      this.spuStep++;
    },
    getPostData() {
      //获取需要提交保存的整个商品信息
      var data = {};
      data.name = this.spuInfo.name;
      data.brandId = this.spuInfo.brandId;
      data.categoryId = this.spuInfo.categoryId;
      data.publishStatus = this.spuInfo.publishStatus;
      data.spuImages = this.spuInfo.images;
      data.baseAttrs = [];
      //整理返回基本属性组合 this.finalValues
      if (this.finalValues.length <= 0) {
        return null;
      }
      for (var i = 0; i < this.finalValues.length; i++) {
        if (this.finalValues[i].length > 0) {
          for (var j = 0; j < this.finalValues[i].length; j++) {
            data.baseAttrs.push(this.finalValues[i][j]);
          }
        }
      }

      data.skus = [];
      //整理返回所有sku信息  this.tableFinalData
      if (this.tableFinalData.length <= 0) {
        return null;
      }
      for (var i = 0; i < this.tableFinalData.length; i++) {
        var item = this.tableFinalData[i];
        item.saleAttrs = [];
        console.log(item, this.tableFinalData)
        for (var attr in item) {
          // console.log(i+"->当前遍历的属性是",attr,typeof attr);
          if (attr.startsWith("attr_")) {
            //说明当前遍历的是属性id
            var attrId = attr.split("_")[1];
            item.saleAttrs.push({
              attrId: attrId,
              attrName: item["name_" + attrId],
              attrValue: item["" + attr]
            });
          }
        }
        data.skus.push(item);
      }
      console.log("最终的数据是：", data);
      return data;
    },

    prev() {
      this.spuStep--
      this.btnText = '下一步'
    },
    selectedValue(val) {
      this.spuInfo.categoryId = val;
      console.log("spuInfo.categoryId", this.spuInfo.categoryId);
    },
    brandSelectedVal(val) {
      this.spuInfo.brandId = val;
      console.log("spuInfo.brandId", this.spuInfo.brandId, val);
    },
    handleCheckedAttrChange(val) {
      //  finalValues:[
      //   {attrId:'',valueSelected:''}
      // ],
      // for(var i=0;i<this.finalValues.length;i++){
      //     if(a==this.finalValues[i].attrId && this.finalValues[attrId]){

      //     }
      // }
      //()
      console.log(val);
      console.log("绑定的数据=>", this.finalValues);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
